<!-- PAGE CONTENT BEGINS -->
<div class="row">
	<div class="col-sm-12">
		<div class="widget-box transparent">
			<div class="widget-header widget-header-flat" id="taskBody">
				<h4 class="lighter">
					<i class="icon-star orange"></i> 任务列表
				</h4>
				<button class="btn btn-sm btn-success" data-toggle="modal"
					data-target="#staticBackdrop">
					<i class="icon-ok bigger-110"></i> 添加任务
				</button>
				<div class="modal fade" id="staticBackdrop" data-backdrop="static"
	data-keyboard="false" tabindex="-1"
	aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-body" id="task-add-body">
				<!-- body -->
				<div id="taskAddBody">
					<div class="form-group">
						<input type=hidden id="task-id" name="task-id" value="None">
						<label for="exampleInputEmail1">任务名</label> <input type="text"
							class="form-control" id="task-name" placeholder="任务名">
					</div>
					<div>
						<div>
							<!-- Nav tabs -->
							<ul class="nav nav-tabs" role="tablist">
								<li role="presentation" class="active"><a href="#addDs"
									aria-controls="addDs" role="tab" data-toggle="tab">数据来源配置</a></li>
								<li role="presentation"><a href="#addDp"
									aria-controls="addDp" role="tab" data-toggle="tab">数据处理配置</a></li>
								<li role="presentation"><a href="#addRes"
									aria-controls="addRes" role="tab" data-toggle="tab">数据结果处理配置</a></li>
							</ul>
							<!-- Tab panes -->
							<div class="tab-content">
								<div role="tabpanel" class="tab-pane active" id="addDs">
									<div class="form-group">
										<label for="exampleInputEmail1">类型</label> <select
											id="data-source-type" name="dataSourceType"
											class="form-control">
											<option value="0">NONE</option>
											<option value="1">GIT</option>
											<option value="2">FTP</option>
											<option value="3">SFTP</option>
											<option value="4">SMB</option>
											<option value="5">JDBC</option>
											<option value="6">MQTT_SUBSCRIBE</option>
											<option value="7">本地文件</option>
										</select>
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">数据来源名称</label> <input
											type="text" class="form-control" id="data-source-name"
											name="name" placeholder="xxxx" value="">
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">数据来源地址</label> <input
											type="text" class="form-control" id="data-source-address"
											name="address" placeholder="git://xxxx:xx/xxx.git" value="">
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">数据来源授权信息</label>
										<textarea class="form-control" rows="3" id="data-source-auth"
											name="authorizeInfo">
										</textarea>
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">数据来源目录</label>
										<textarea class="form-control" rows="3" id="data-source-dir"
											name="datasourceDir"></textarea>
									</div>
									<div class="form-group">
										<input type="checkbox" id="data-source-is-save">
										<button class="btn btn-sm btn-success"
											onclick="saveTaskDataSource('addDs')">
											<i class="icon-ok bigger-110"></i> 保存
										</button>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane " id="addDp">
									<div class="form-group">
										<label for="exampleInputEmail1">数据处理名称</label> <input
											type="text" class="form-control" id="data-processing-name"
											name="name" placeholder="xxxx" value="">
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">脚本处理</label>
										<textarea class="form-control" rows="3"
											id="data-processing-script" name="dataProcessingScript">
		</textarea>
									</div>
									<div class="form-group">
										<input type="checkbox" id="data-processing-is-save">
										<button class="btn btn-sm btn-success"
											onclick="saveTaskDataProcessing('addDp')">
											<i class="icon-ok bigger-110"></i> 保存
										</button>
									</div>
								</div>

								<div role="tabpanel" class="tab-pane " id="addRes">
									<ul class="nav nav-tabs" role="tablist" id="add-tab">
										<li role="presentation"><a href="#" onclick="addTab()">
												+ </a></li>
										<li role="presentation" class="active"><a href="#home"
											aria-controls="home" role="tab" data-toggle="tab">首页</a></li>
									</ul>
									<!-- Tab panes -->
									<div class="tab-content" id="add-tabpanel">
										<div role="tabpanel" class="tab-pane active" id="home">
											<div class="form-group">
												<label for="exampleInputEmail1">模板名</label> <input
													type="text" class="form-control" id="htmlTemplate-name"
													name="name" placeholder="模板名"> <label
													for="exampleInputEmail1">解析脚本代码</label>
												<textarea class="form-control" rows="3"
													id="analysis-shell-text" name="analyzeAndExtractText"></textarea>
											</div>
											<div class="form-group">
												<label for="exampleInputEmail1">渲染模版</label>
												<textarea class="form-control" rows="3" id="mustache-text"
													name="formatScriptText"></textarea>
											</div>
										</div>
									</div>
									<div class="form-group">
										<input type="checkbox" id="html-template-is-save">
										<button class="btn btn-sm btn-success"
											onclick="saveHtmlTemplate('addRes')">
											<i class="icon-ok bigger-110"></i> 保存
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- end -->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="task-save">保存</button>
			</div>
		</div>
	</div>
</div>

<script id="add-tab-header" type="text/html">
		<li role="presentation" ><a href="#np<?=result.name?>" aria-controls="np<?=result.name?>" role="tab" data-toggle="tab">新页</a></li>
</script>


<script id="add-tab-body" type="text/html">
	<div role="tabpanel" class="tab-pane" id="np<?=result.name?>">
		<div class="form-group">
		<label for="exampleInputEmail1">模板名</label> <input type="text" class="form-control" id="htmlTemplate-name"
			name="name" placeholder="模板名">
		<label for="exampleInputEmail1">解析脚本代码</label>
		<textarea class="form-control" rows="3" id="analysis-shell-text" name="analysisShellText"></textarea>
	</div>
	<div class="form-group">
		<label for="exampleInputEmail1">渲染模版</label>
		<textarea class="form-control" rows="3" id="mustache-text" name="mustacheText"></textarea>
	</div>
</script>
			</div>
		</div>

		<div class="widget-body">
			<div class="widget-main no-padding">
				<table class="table table-bordered table-striped">
					<thead class="thin-border-bottom">
						<tr>
							<th><i class="icon-caret-right blue"></i> 任务名称</th>
							<th><i class="icon-caret-right blue"></i> 任务状态</th>
							<th class="hidden-480"></th>
						</tr>
					</thead>

					<tbody id="show-task-list">
						<tr>
							<td>批量导出</td>
							<td class="hidden-480"><span
								class="label label-info arrowed-right arrowed-in">等待中</span></td>
							<td>
								<button class="btn btn-sm btn-success">
									<i class="icon-ok bigger-110"></i> 执行
								</button>
							</td>
						</tr>

					</tbody>
				</table>
				<!-- Page navigation begin -->
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li><a href="#" aria-label="Previous"> <span
								aria-hidden="true">&laquo;</span>
						</a></li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#" aria-label="Next"> <span
								aria-hidden="true">&raquo;</span>
						</a></li>
					</ul>
				</nav>
				<!-- Page navigation end -->
			</div>
			<!-- /widget-main -->
		</div>
		<!-- /widget-body -->
	</div>
	<!-- /widget-box -->

	<script id="show-task-window-template2" type="text/html">
	<div class="modal fade" id="staticBackdrop2" data-backdrop="static"
	data-keyboard="false" tabindex="-1"
	aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-body" id="task-add-body">
				<!-- body -->
				<div id="taskModifyBody">
					<div class="form-group">
						<label for="exampleInputEmail1">任务名</label> <input type="text"
							class="form-control" id="task-name-modify" placeholder="任务名"
							value="<?=result.taskName?>">
					</div>
					<div>
						<div>
							<!-- Nav tabs -->
							<ul class="nav nav-tabs" role="tablist">
								<li role="presentation" class="active"><a href="#modifyDs"
									aria-controls="modifyDs" role="tab" data-toggle="tab">数据来源配置</a></li>
								<li role="presentation"><a href="#modifyDp"
									aria-controls="modifyDp" role="tab" data-toggle="tab">数据处理配置</a></li>
								<li role="presentation"><a href="#modifyRes"
									aria-controls="modifyRes" role="tab" data-toggle="tab">数据结果处理配置</a></li>
							</ul>
							<!-- Tab panes -->
							<div class="tab-content">
								<div role="tabpanel" class="tab-pane active" id="modifyDs">
									<div class="form-group">
										<label for="exampleInputEmail1">类型</label> <select
											id="data-source-type" name="dataSourceType"
											class="form-control">
											<option value="0">NONE</option>
											<option value="1">GIT</option>
											<option value="2">FTP</option>
											<option value="3">SFTP</option>
											<option value="4">SMB</option>
											<option value="5">JDBC</option>
											<option value="6">MQTT_SUBSCRIBE</option>
											<option value="7">本地文件</option>
										</select>
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">数据来源名称</label> <input
											type="text" class="form-control" id="data-source-name"
											name="name" placeholder="xxxx"
											value="<?=result.data.datasource.name?>">
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">数据来源地址</label> <input
											type="text" class="form-control" id="data-source-address"
											name="address" placeholder="git://xxxx:xx/xxx.git"
											value="<?=result.data.datasource.address?>">
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">数据来源授权信息</label>
										<textarea class="form-control" rows="3" id="data-source-auth"
											name="authorizeInfo">
							<?=result.data.datasource.authorizeInfo?>
		</textarea>
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">数据来源目录</label>
										<textarea class="form-control" rows="3" id="data-source-dir"
											name="datasourceDir"></textarea>
									</div>
									<div class="form-group">
										<input type="checkbox" id="data-source-is-save">
										<button class="btn btn-sm btn-success"
											onclick="saveTaskDataSource('modifyDs')">
											<i class="icon-ok bigger-110"></i> 保存
										</button>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane " id="modifyDp">
									<div class="form-group">
										<label for="exampleInputEmail1">数据处理名称</label> <input
											type="text" class="form-control" id="data-processing-name"
											name="name" placeholder="xxxx"
											value="<?=result.data.dataprocessing.name?>">
									</div>
									<div class="form-group">
										<label for="exampleInputEmail1">脚本处理</label>
										<textarea class="form-control" rows="3"
											id="data-processing-script" name="dataProcessingScript">
						<?=result.data.dataprocessing.dataProcessingScript ?>
						</textarea>
									</div>
									<div class="form-group">
										<input type="checkbox" id="data-processing-is-save">
										<button class="btn btn-sm btn-success"
											onclick="saveTaskDataProcessing('modifyDp')">
											<i class="icon-ok bigger-110"></i> 保存
										</button>
									</div>
								</div>

								<div role="tabpanel" class="tab-pane " id="modifyRes">
									<ul class="nav nav-tabs" role="tablist" id="add-tab">
										<li role="presentation"><a href="#" onclick="addTab()">
												+ </a></li>
										<? for (i=0;i<result.data.htmlTemplate.data.length;i++){?>
										<? 
								var data = result.data.htmlTemplate.data[i];
								if(i == 0){
							?>
										<li role="presentation" class="active"><a
											href="#<?=data.pyName?>" aria-controls="<?=data.pyName?>"
											role="tab" data-toggle="tab"> <?=data.name?>
										</a></li>
										<?}else{?>
										<li role="presentation"><a href="#<?=data.pyName?>"
											aria-controls="<?=data.pyName?>" role="tab" data-toggle="tab">
												<?=data.name?>
										</a></li>
										<?}?>
										<?}?>
									</ul>
									<!-- Tab panes -->
									<div class="tab-content" id="add-tabpanel">
										<?for(i=0;i<result.data.htmlTemplate.data.length;i++){
				var data = result.data.htmlTemplate.data[i];
		?>
										<?if(i==0){?>
										<div role="tabpanel" class="tab-pane active"
											id="<?=data.pyName?>">
											<div class="form-group">
												<label for="exampleInputEmail1">模板名</label> <input
													type="text" class="form-control" id="htmlTemplate-name"
													name="name" placeholder="模板名" value="<?=data.name?>">
												<label for="exampleInputEmail1">解析脚本代码</label>
												<textarea class="form-control" rows="3"
													id="analysis-shell-text" name="analyzeAndExtractText">
		<?=data.analyzeAndExtractText?>
		</textarea>
											</div>
											<div class="form-group">
												<label for="exampleInputEmail1">渲染模版</label>
												<textarea class="form-control" rows="3" id="mustache-text"
													name="formatScriptText">
		<?=data.formatScriptText?>
		</textarea>
											</div>
										</div>
										<?}else{?>
										<div role="tabpanel" class="tab-pane" id="<?=data.pyName?>">
											<div class="form-group">
												<label for="exampleInputEmail1">模板名</label> <input
													type="text" class="form-control" id="htmlTemplate-name"
													name="name" placeholder="模板名" value="<?=data.name?>">
												<label for="exampleInputEmail1">解析脚本代码</label>
												<textarea class="form-control" rows="3"
													id="analysis-shell-text" name="analyzeAndExtractText">
		<?=data.analyzeAndExtractText?>
		</textarea>
											</div>
											<div class="form-group">
												<label for="exampleInputEmail1">渲染模版</label>
												<textarea class="form-control" rows="3" id="mustache-text"
													name="formatScriptText">
		<?=data.formatScriptText?>
		</textarea>
											</div>
										</div>
										<?}?>
										<?}?>
									</div>
									<div class="form-group">
										<input type="checkbox" id="html-template-is-save">
										<button class="btn btn-sm btn-success"
											onclick="saveHtmlTemplate('modifyRes')">
											<i class="icon-ok bigger-110"></i> 保存
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- end -->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="task-save">保存</button>
			</div>
		</div>
	</div>
</div>	
	</script>

	<script id="show-task-list-template" type="text/html">
	<?for(i=0;i<results.length;i++){?>
<tr>
	<td>
		<?=results[i].taskName ?>
	</td>
	<td class="hidden-480" id="show-task-status">
		<?
			var taskStatus = results[i].status;
			if(taskStatus == 0){
		?>
		<span class="label label-info arrowed-right arrowed-in">失败</span> 
		<?}else if(taskStatus==1){?> 
		<span class="label label-info arrowed-right arrowed-in">成功 </span>
		 <?}else if(taskStatus==2){?>
		<span class="label label-info arrowed-right arrowed-in">等待 </span>
		<?}else if(taskStatus==3){?>
		<span class="label label-info arrowed-right arrowed-in">就绪 </span>
		<?}else if(taskStatus==4){?>
		<span class="label label-info arrowed-right arrowed-in">未知 </span>
		<?}?>
		<div class="row" id="show-task-results">
			<div class="col-md-6" id="show-zx-echarts<?=results[i].taskId ?>"
				style="width: 500px; height: 500px"></div>
			<div class="col-md-6" id="show-text<?=results[i].taskId ?>"></div>
			<div class="col-md-6" id="show-dabing-echarts<?=results[i].taskId ?>"
				style="width: 500px; height: 500px"></div>
		</div>
	</td>
	<td>
		<button class="btn btn-sm btn-success"
			onclick="runTask('<?=results[i].taskId?>')">
			<i class="icon-ok bigger-110"></i> 执行
		</button>
		<button class="btn btn-sm btn-success" data-toggle="modal"
			data-target="#staticBackdrop2"
			onclick="modifyTask('<?=results[i].taskId?>')">
			<i class="icon-ok bigger-110"></i> 修改
		</button>
		<button class="btn btn-sm btn-error"
			onclick="delTask('<?=results[i].taskId?>')">
			<i class="icon-ok bigger-110"></i> 删除
		</button>
		<button class="btn btn-sm btn-error"
			onclick="exitTask('<?=results[i].taskId?>')">
			<i class="icon-ok bigger-110"></i> 停止
		</button>
	</td> 
	<?}?>		
	</script>
	
	<script>
	function saveTaskDataSource(id) {
	var htmlTemplate = [];
	var taskId = $("#task-id").val();
	if (typeof $("#task-name-modify")[0] !== 'undefined' && $("#task-name-modify").val() != "None") {
		$("#task-name").val($.trim($("#task-name-modify").val()))
		$("#task-name-modify").val("")
	}
	var taskName = $.trim($("#task-name").val());
	$("#" + id).each(function() {
		var formData = {
			taskId: taskId,
			taskName: taskName
		};
		$(this).find('input[type="text"]').each(function() {
			formData[this.name] = $(this).val();
		});

		$(this).find('textarea').each(function() {
			formData[this.name] = $(this).val();
		});

		$(this).find('select').each(function() {
			formData[this.name] = $(this).val();
		});

		htmlTemplate.push(formData);
	});
	$.ajax({
		url: pathSpec + "/job/task/demo/datasource",
		type: "post",
		data: JSON.stringify(htmlTemplate[0]),
		contentType: "application/json",
		success:
			function(data, text, xhr) {
				if (xhr.status == 201) {
					$("#data-source-is-save").prop("checked", true);
					console.log(data);
					console.log(data[0]);
					var a = data[0];
					console.log(a["v"]);
					$("#task-id").val(a["v"]);
					alert("数据源保存成功");
				} else
					if (xhr.status == 402) {
						alert("数据源保存失败");
					}
			}
	});
}

function saveTaskDataProcessing(id) {

	var htmlTemplate = [];
	var taskId = $("#task-id").val();
	var taskName = $("#task-name").val();

	$("#" + id).each(function() {
		var formData = {
			taskId: taskId,
			taskName: taskName
		}; // 当前div的数据对象  

		// 查找并收集input的值  
		$(this).find('input[type="text"]').each(function() {
			formData[this.name] = $(this).val();
		});

		// 查找并收集textarea的值  
		$(this).find('textarea').each(function() {
			formData[this.name] = $(this).val();
		});

		$(this).find('select').each(function() {
			formData[this.name] = $(this).val();
		});

		// 将当前div的数据对象添加到集合中  
		htmlTemplate.push(formData);
	});
	$.ajax({
		url: pathSpec + "/job/task/demo/dataprocessing",
		type: "post",
		data: JSON.stringify(htmlTemplate[0]),
		contentType: "application/json",
		success: function(data, text, xhr) {
			if (xhr.status == 201) {
				$("#data-processing-is-save").prop("checked", true);
				$("#task-id").val(data[0]["v"]);
				alert("数据源保存成功");
			} else if (xhr.status == 402) {
				alert("数据源保存失败");
			}
		}
	})

}

function saveHtmlTemplate(id) {
	var htmlTemplate = [];
	var taskId = $("#task-id").val();
	var taskName = $("#task-name").val();

	$("#" + id).find('[role="tabpanel"]').each(function() {
		var formData = {
			taskId: taskId,
			taskName: taskName
		}; // 当前div的数据对象  
		// 查找并收集input的值  
		$(this).find('input[type="text"]').each(function() {
			formData[this.name] = $(this).val();
		});

		// 查找并收集textarea的值  
		$(this).find('textarea').each(function() {
			formData[this.name] = $(this).val();
		});

		$(this).find('select').each(function() {
			formData[this.name] = $(this).val();
		});
		// 将当前div的数据对象添加到集合中
		htmlTemplate.push(formData);
	});
	// taskresult 名不好
	$.ajax({
		url: pathSpec + "/job/task/demo/taskresult",
		type: "post",
		data: JSON.stringify(htmlTemplate),
		contentType: "application/json",
		success: function(data, text, xhr) {
			if (xhr.status == 201) {
				$("#html-template-is-save").prop("checked", true);
				alert("模板保存成功");
			}
		}
		// 将当前div的数据对象添加到集合中
	})
}

var tabId = 1;
function addTab() {
	var result = {
		result: {
			name: tabId
		}
	};
	var html = template("add-tab-body", result);
	$("#add-tabpanel").append(html);
	html = template("add-tab-header", result);
	$("#add-tab").append(html);
	tabId += 1;
	document.all.sel.options[0].selected = true;
}
	
	function delTask(taskId) {
	$.ajax({
		url: pathSpec + "/job/task/demo/" + taskId,
		type: "delete",
		success: function(data, text, xhr) {
			if (xhr.status == 201) {
				alert("任务删除成功");
			} else if (xhr.status == 402) {
				alert("任务删除失败");
			}
		},
	});
}

function modifyTask(taskId) {
	$.ajax({
		url: pathSpec + "/job/task/demo/" + taskId,
		type: "get",
		success: function(data) {
			var results = {
				result: {
					type: 1,
					data_source_type: [],
					data_processing_type: [],
					data: {
						htmlTemplate: {
							data: []
						}
					}
				}
			};
			console.log(data.results);
			console.log(data.results.taskId);
			console.log(data.results.dataSource);
			console.log("-----");
			results.result.taskId = data.results.taskId;
			results.result.taskName = data.results.taskName;
			results.result.data.datasource = data.results.dataSource;
			results.result.data.dataprocessing = data.results.dataProcessing;
			results.result.data.htmlTemplate.data = data.results.taskResultList;
			var html = template(
				"show-task-window-template2",
				results);
		    $("#task-id").val(taskId);
			$("#taskBody").append(html);
			$('#staticBackdrop2').modal('show');
		}
	})
}
function getTaskList() {
	console.log("GetTaskList");
	$.ajax({
		url: pathSpec + "/job/task/list/demo",
		type: "get",
		success: function(data) {
			var results = {
				results: data
			};
			var html = template("show-task-list-template", results);
			$("#show-task-list").html(html);
			for (i = 0; i < data.length; i++) {
				getTaskResult(data[i].taskId);
			}
		}
	});
}

function runTask(taskId) {
	$.ajax({
		url: pathSpec + "/job/task/run/demo/" + taskId,
		type: "get",
		success: function(data) {
		}
	});
}

function getTaskResult(taskId) {
	console.log(taskId);
	$.ajax({
		url: pathSpec + "/job/task/result/demo/" + taskId,
		type: "get",
		success: function(data, text, xhr) {
			console.log(data);
			if (xhr.status == 200) {
				$("#show-text" + taskId).html(
					data.results.result[0].mustacheText);
				$("#show-text" + taskId).append(
					data.results.result[1].resultText);
				eval(data.results.result[1].resultText);
			}
		}
	});
}

$(document).ready(function() {
	console.log("init");
	getTaskList();

});



	
	</script>
	<!-- PAGE CONTENT ENDS -->UTF-8